<template>
	<view class="add-category-page">
		<uni-section title="新增分类" type="line" class="section-header">
			<view class="form-container">
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" class="category-form">
					<uni-forms-item label-width="180rpx" label="分类名称" required name="name">
						<uni-easyinput v-model="valiFormData.name" placeholder="请输入分类名称" class="form-input"
							placeholderStyle="color: #a0b1c5;" />
					</uni-forms-item>

					<uni-forms-item label-width="180rpx" label="描述" name="description">
						<uni-easyinput v-model="valiFormData.description" placeholder="请输入分类描述" class="form-input"
							placeholderStyle="color: #a0b1c5;" />
					</uni-forms-item>

					<uni-forms-item label-width="180rpx" label="排序" required name="sort">
						<uni-easyinput v-model.number="valiFormData.sort" placeholder="数字越大排序越靠后" class="form-input"
							placeholderStyle="color: #a0b1c5;" />
						<view class="hint-text">注：请输入0或正整数</view>
					</uni-forms-item>

					<view class="form-buttons">
						<button type="default" class="reset-button" @click="resetForm">重置</button>
						<button type="primary" class="submit-button" @click="submit('valiForm')">提交</button>
					</view>
				</uni-forms>
			</view>
		</uni-section>

		<view class="decorative-element"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valiFormData: {
					name: '',
					sort: null,
					description: '',
					create_date: null,
					status: 0
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
					sort: {
						rules: [{
							required: true,
							errorMessage: '排序不能为空'
						}, {
							format: 'number',
							validate: (rule, value) => {
								// 自定义验证确保输入的是正数
								return Number(value) >= 0;
							},
							errorMessage: '只能输入非负数字'
						}]
					}
				}
			}
		},
		methods: {
			async submit(ref) {
				try {
					// 表单验证
					await this.$refs[ref].validate();

					// 设置创建时间
					this.valiFormData.create_date = Date.now();

					// 调用云对象
					const obj = uniCloud.importObject('goods');
					const res = await obj.addCategories(this.valiFormData);

					// 显示结果
					if (res.code == 0) {
						uni.showToast({
							title: res.message,
							icon: 'success'
						});

						// 提交成功后重置表单
						this.resetForm();
						setTimeout(() => {
							uni.$router.to({
								url: '/pagesA/item/categories/list',
							})
						}, 1000)

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					});
					// console.error('表单提交错误:', err);
				}
			},

			resetForm() {
				this.valiFormData = {
					name: '',
					sort: null,
					description: '',
					create_date: null
				};

				// 如果有表单引用，可以重置验证状态
				if (this.$refs.valiForm && typeof this.$refs.valiForm.resetFields === 'function') {
					this.$refs.valiForm.resetFields();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-category-page {
		background: linear-gradient(135deg, #e6f0ff 0%, #f0f7ff 100%);
		min-height: 100vh;
		padding: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.section-header {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 30rpx rgba(26, 115, 232, 0.1);
		margin-bottom: 30rpx;
		border: 1rpx solid #d0e3ff;
	}

	.form-container {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.category-form {
		padding: 20rpx;
	}

	.form-input {
		background: #f9fbfe;
		border-radius: 16rpx;
		border: 1rpx solid #d0e3ff;
		padding: 18rpx 25rpx;
		font-size: 28rpx;
		color: #2c3e50;
		transition: all 0.3s;
	}

	.form-input:focus {
		border-color: #1a73e8;
		box-shadow: 0 0 0 4rpx rgba(26, 115, 232, 0.15);
	}

	.hint-text {
		font-size: 24rpx;
		color: #5a7ea0;
		margin-top: 10rpx;
		padding-left: 10rpx;
	}

	.form-buttons {
		display: flex;
		justify-content: center;
		margin-top: 60rpx;
		gap: 30rpx;
	}

	.reset-button {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f0f7ff;
		color: #1a73e8;
		border: 1rpx solid #1a73e8;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
		transition: all 0.3s;
	}

	.reset-button:active {
		background: #e1ecff;
		transform: translateY(4rpx);
	}

	.submit-button {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, #1a73e8, #4d9aff);
		color: #fff;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(26, 115, 232, 0.3);
		transition: all 0.3s;
	}

	.submit-button:active {
		transform: translateY(4rpx);
		box-shadow: 0 4rpx 10rpx rgba(26, 115, 232, 0.3);
	}

	.decorative-element {
		position: absolute;
		bottom: -100rpx;
		right: -100rpx;
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(26, 115, 232, 0.1) 0%, rgba(77, 154, 255, 0.05) 100%);
		z-index: 0;
	}

	::v-deep .uni-forms-item__label {
		font-weight: bold;
		color: #1a4e8e !important;
		font-size: 30rpx;
	}
</style>